<template>
  <el-menu-item index="4" @click="activeDraw"> 事件查询</el-menu-item>
  <pop-up
    v-if="featuresInfo.length > 0"
    :featuresInfo="featuresInfo"
    @close="handleClose"
    :isClose="isClose"
  ></pop-up>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import { createDraw } from "@/api/ol-api/createDraw.js";
import { setMarkerStyle } from "@/api/ol-api/index";
import { Query } from "@/api/mapgis-api/Query";
import PopUp from "./PopUp.vue";
let map; // 定义 map 变量
let isOpen = false; // 定义事件查询按钮是否打开的状态
let featuresInfo = ref([]); // 定义要素信息
let isClose = ref(true); // 定义PopUp是否关闭

/* 1.设置画布 */
const source = new ol.source.Vector({});
const layer = new ol.layer.Vector({
  source,
});

/* 2.设置marker标注图层 */
const high_layer = new ol.layer.Vector({
  source: new ol.source.Vector({}),
  //设置图片标注
  style: setMarkerStyle("../src/images/location.png"),
});

onMounted(() => {
  const { proxy } = getCurrentInstance();
  map = proxy.$map;
  map.addLayer(layer);
  map.addLayer(high_layer);
});
/* 3.创建一个圆画笔 */
let draw = createDraw({
  type: "Circle",
  source,
  success: async (feature) => {
    /* 在画之前清除之前所画要素 */
    map.removeInteraction(draw);
    source.clear();
    high_layer.getSource().clear();
    /* 4.获取范围内mapgis的事件要素 */
    //画笔获取geometry数据和service数据传递给queryByGeometry方法
    let geometry = feature.getGeometry();
    console.log(geometry)
    let service = {
      docName: "guanggu",
      layerId: 2,
    };
    let features = await Query.queryByCircleGeometry({
      geometry,
      service,
    });
    console.log("查询结果", features);
    /* 5.查询到的要素添加到marker标注图层 */
    high_layer.getSource().addFeatures(features);
    featuresInfo.value = features;
    if (features.length > 0) {
        isClose.value = true;
    }
  },
});


//点击一次激活画笔,第二次清除所有数据
function activeDraw() {
  isOpen = !isOpen;
  if (isOpen) {
    /* 激活画笔 */
    map.addInteraction(draw);
  } else {
    layer.getSource().clear();
    high_layer.getSource().clear();
    featuresInfo.value = [];
    //第二次点击时，popup同时消失
    isClose.value = false;
  }
}
const handleClose = () => {
  isClose.value = false;
}

</script>

<style scoped></style>
